<template>
  <div>
    <multiImgUpload @changeImg="changeImg" :formItem="compConfig" @removeFinished="removeFinished"
      @cutFinished="cutFinished" :formNamePath="props.formNamePath">
    </multiImgUpload>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed } from "vue";
import multiImgUpload from "../../formitem/multiImgUpload/index.vue";
import formItemForm from "./config";
import { useModelStore } from "@/store/modules/model/column";
import { useColumnModel } from '@/components/draggable/hooks/useColumnModel';
const useModel = useModelStore();
const formItem = ref(formItemForm as any);
const props = defineProps({
  element: [],
  formNamePath: [],
})
const emit = defineEmits(["changeImg", "removeFinished", 'cutFinished']);
const compConfig = ref(JSON.parse(JSON.stringify(formItemForm.component.settings)));
useColumnModel(compConfig, computed(() => props.element));

const changeImg = (data: []) => {
  compConfig.value.value.push(...data);
};
const removeFinished = (data: any) => {
  let cutIndex = compConfig.value.value.findIndex((item: any) => item.id == data.id);
  compConfig.value.value.splice(cutIndex, 1);
}
const cutFinished = (data: any, id: any) => {
  console.log(data, 888888)
  let cutIndex = compConfig.value.value.findIndex((item: any) => item.id == id);
  compConfig.value.value[cutIndex] = data[0];
}
</script>

<style lang="less" scoped></style>
